<!--
Copyright (c) 2017-present, Facebook, Inc.
All rights reserved.
This source code is licensed under the BSD-style license found in the
LICENSE file in the root directory of this source tree. An additional grant
of patent rights can be found in the PATENTS file in the same directory.
-->
{% extends "core.html" %}

{% block main_pane %}
<div id="main-pane" class="col-xs-12" style="height: {{frame_height}}px; background-color: #dff0d8; padding-top: 10px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; height: 650px; overflow:scroll;">
    <h3 id="title">Task instructions</h3>
    <hr style="border-top: 1px solid #555; margin-bottom: 5px;" />
    <div id="instruction0" class="well" style="display: none; background: #fff">
        <div style="width: 600px">
            This HIT involves a Tourist and a Guide that are talking on the phone in New York City.
            <ul>
                <li><b>Tourist:</b> Walking on the street, being guided. </li>
                <li><b>Guide:</b> Reading a map, guiding the tourist to target location. </li>
            </ul>
            We'll walk you through an example, showing both the Tourist and Guide role.
        </div>
    </div>
    <div id="instruction1" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction1.jpg" />
    </div>
    <div id="instruction2" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction2.jpg" />
    </div>
    <div id="instruction3" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction3.jpg" />
    </div>
    <div id="instruction4" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction4.jpg" />
    </div>
    <div id="instruction5" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction5.jpg" />
    </div>
    <div id="instruction6" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction6.jpg" />
    </div>
    <div id="instruction7" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction7.jpg" />
    </div>
    <div id="instruction8" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction8.jpg" />
    </div>
    <div id="instruction9" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction9.jpg" />
    </div>
    <div id="instruction10" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction10.jpg" />
    </div>
    <div id="instruction11" class="well" style="display: none; background: #fff">
        <img height="450px" src="https://dl.fbaipublicfiles.com/parlai/mturk/guess-what/instruction11.jpg" />
    </div>
    <div id="instruction12" class="well" style="display: none; background: #fff">
        <div style="width: 600px">
            <ul>
                <li>Both players receive <b>40c bonus</b> if the Tourist arrives at the target location. </li>
                <li>You have three attempts to evaluate the location of the Tourist. The 40c </li>
                <li>Please only chat about things related to the task. </li>
                <li>You can keep accepting new HITs. </li>
                <li>Good luck!</li>
            </ul>
        </div>
    </div>
    <div class="row" id="navigation_bar">
        <div class="col-sm-4 col-md-4">
            <button id="prev" class="btn btn-info" style="display:none">Previous</button>
        </div>
        <div class="col-sm-8 col-md-8">
            <button id="next" class="btn btn-info" style="float:right">Next</button>
            <button id="start" class="btn btn-success" style="float: right; display: none">Start the task</button>
        </div>
    </div>

</div>

{% endblock %}

{% block additional_scripts %}
<script type="text/javascript">
    var titles = ['Roles', 'Example', 'Example', 'Example', 'Example', 'Example', 'Example', 'Example', 'Example', 'Example'];
    var round = 0;
    var max = 12;
    var ack = false;
    $(document).ready(function() {
        $('#instruction0').show();
        $('#title').text(titles[round]);
    });
    $('#prev').click(function() {
        $('#instruction' + round.toString()).hide();
        round -= 1;
        $('#instruction' + round.toString()).show();
        if (round == 0) $('#prev').hide();
        $('#next').show();
        $('#start').hide();
        $('#title').text(titles[round]);
    });
    $('#next').click(function() {
        $('#instruction' + round.toString()).hide();
        round += 1;
        $('#instruction' + round.toString()).show();
        if (round == max) {
            $('#next').hide();
            $('#start').show();
        }
        $('#prev').show();
        $('#title').text(titles[round]);
    });
    $('#start').click(function(){
        console.log('click');
       $('#start').attr('disabled', 'disabled');
       send_packet(
           TYPE_MESSAGE,
           {'text': 'done',
            'id': cur_agent_id,
            'message_id' : 'DONE'},
           true,
           true,
           show_waiting_world)
    });
    function show_waiting_world() {
        if (!ack) {
            ack = true;
            $('#instruction' + round.toString()).hide();
            $('#main-pane').append('<div id="waiting-for-message" class="row" style="margin-left: 0; margin-right: 0;"> <div class="alert alert-warning" role="alert" style="float: left; display:table; background-color: #fff"> <div id="hourglass" style="margin-top: -1px; margin-right: 5px; display: inline; float: left;"> <?xml version="1.0" encoding="utf-8"?><svg width="25px" height="25px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-hourglass"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g><path fill="none" stroke="#007282" stroke-width="5" stroke-miterlimit="10" d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z" class="glass"></path><clipPath id="uil-hourglass-clip1"><rect x="15" y="20" width="70" height="25" class="clip"><animate attributeName="height" from="25" to="0" dur="1.5s" repeatCount="indefinite" values="25;0;0" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="20" to="45" dur="1.5s" repeatCount="indefinite" values="20;45;45" keyTimes="0;0.5;1"></animate></rect></clipPath><clipPath id="uil-hourglass-clip2"><rect x="15" y="55" width="70" height="25" class="clip"><animate attributeName="height" from="0" to="25" dur="1.5s" repeatCount="indefinite" values="0;25;25" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="80" to="55" dur="1.5s" repeatCount="indefinite" values="80;55;55" keyTimes="0;0.5;1"></animate></rect></clipPath><path d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z" clip-path="url(#uil-hourglass-clip1)" fill="#ffab00" class="sand"></path><path d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z" clip-path="url(#uil-hourglass-clip2)" fill="#ffab00" class="sand"></path><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" repeatCount="indefinite" dur="1.5s" values="0 50 50;0 50 50;180 50 50" keyTimes="0;0.7;1"></animateTransform></g></svg> </div> <span style="font-size: 16px">Waiting for other workers to join the task...</span> </div> </div>');
            $('#title').text('Started the task..');
            $('#navigation_bar').hide();
        }
    }
</script>
{% endblock %}
